<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div class="nav">
        ⽹络五⼦棋对战游戏
    </div>
    <div class="login-container">
        <!-- 登录界⾯的对话框 -->
        <div class="login-dialog">
            <!-- 提⽰信息 -->
            <h3>登录</h3>
            <!-- 这个表⽰⼀⾏ -->
            <div class="row">
                <span>⽤⼾名</span>
                <input type="text" id="user_name">
            </div>
            <!-- 这是另⼀⾏ -->
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <!-- 提交按钮 -->
            <div class="row">
                <p><button id="submit" onclick="login()">提交</button></p>
                <p><button id="register" onclick="reg()">注册</button></p>
            </div>
        </div>
    </div>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;

            background-image: url("../image/cat.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }

        .nav {
            height: 50px;

            background-color: rgb(50, 50, 50);
            color: white;

            line-height: 50px;
            padding-left: 20px;
        }

        .login-container {
            height: calc(100% - 50px);

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-dialog {
            width: 400px;
            height: 400px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        /* 标题 */
        .login-dialog h3 {
            text-align: center;
            padding: 50px 0;
        }

        /* 针对一行设置样式 */
        .login-dialog .row {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .login-dialog .row span {
            width: 100px;
            font-weight: 700;
        }

        #user_name,
        #password {
            width: 200px;
            height: 40px;

            font-size: 20px;
            line-height: 40px;
            padding-left: 10px;
            border: none;
            outline: none;
            border-radius: 10px;
        }

        #submit {
            width: 300px;
            height: 50px;

            background-color: rgb(0, 128, 0);
            color: white;

            border: none;
            outline: none;
            border-radius: 10px;

            margin-top: 20px;
        }

        #register {
            width: 300px;
            height: 50px;

            background-color: rgb(0, 128, 0);
            color: white;

            border: none;
            outline: none;
            border-radius: 10px;

            margin-top: 20px;
        }

        #submit:active {
            background-color: #666;
        }
    </style>
    <script src="./js/jquery.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script> -->
    <script>
        function reg() {
            location.replace("register.html");
        }
        //1.给按钮设置点击登录事件
        //2.实现登录方法
        function login() {
            //1.获取输入框中的内容
            var log_info = {
                username: document.getElementById("user_name").value,
                password: document.getElementById("password").value
            }
            //2.向服务器发送json
            $.ajax({
                url: "/login",
                type: "post",
                data: JSON.stringify(log_info),

                success: function (res) {
                    window.location.assign("/game_hall.html");
                    alert("登录成功!!!");
                },
                error: function (xhr) {
                    document.getElementById("user_name").value = "";
                    document.getElementById("password").value = "";
                    alert("用户名或密码错误");
                }
            })
        }
    </script>
</body>